<template>
  <el-dialog width="900" v-model="props.isVisible" title="上传数据集" @close="handleClose">
    <div class="uploadContent">
      <div class="uploadLeft">
        <el-upload class="upload-demo" drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          multiple>
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            拖拽或 <em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
            </div>
          </template>
        </el-upload>
        <div class="fileUrl">{{ fileUrl }}</div>
        <input class="uploadInput" type="file" id="fileUpload" @change="uploadFile" name="file">
      </div>
      <div class="uploadRight">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="formData" :rules="rules" label-width="auto"
          class="demo-ruleForm" status-icon>
          <el-form-item label="名称：" prop="name">
            <el-input v-model="formData.name" placeholder="请输入名称" clearable />
          </el-form-item>
          <el-form-item label="描述：" prop="description">
            <el-input v-model="formData.description" placeholder="请输入描述"  type="textarea" :autosize="{ minRows: 6, maxRows: 6 }" />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSave(ruleFormRef)"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox, FormInstance} from 'element-plus'
import { datasetsUpload } from '@/api/home';
import bus from 'vue3-eventbus';

const ruleFormRef = ref<FormInstance>();
let formData = reactive({
  name: '',
  description: '',
  file: null
});
const fileUrl = ref('');
const uploadFile = (e) => {
  formData.file = e.target.files[0];
  fileUrl.value = e.target.files[0].name;
}

const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits("update:isVisible");
const handleClose = () => {
  emits("update:isVisible", false);
};
const handleSave = (formEl) => {
  formEl.validate((valid, fields) => {
    if (valid) {
      let data = new FormData()
      data.append('name', formData.name)
      data.append('file', formData.file)
      data.append('description', formData.description)
      datasetsUpload(data).then((res: any) => {
        emits("update:isVisible", false);
        bus.emit('datasets');
        ElMessage({
          message: '上传成功！',
          type: 'success',
        })
        formData = {
          name: '',
          description: '',
          file: null
        };
        fileUrl.value = '';
      })
    } else {
      console.log('error submit!', fields)
    }
  })
 
}

const rules = {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
  ],
  description: [
    {
      required: true,
      message: '请输入描述',
      trigger: 'blur',
    },
  ],
}
</script>

<style scoped lang="scss">
.uploadContent {
  display: flex;
  justify-content: center;
  padding: 40px 20px;

  .uploadLeft {
    width:300px;
    position: relative;
    border-radius: 8px;
    color: #c7c8c8;
    font-size: 30px;

    .fileUrl {
      position: absolute;
      bottom: -8px;
      color: #666;
      font-size: 14px;
    }

    .uploadInput {
      position: absolute;
      top: 0;
      left: 0;
      width: 300px;
      height: 200px;
      cursor: pointer;
      font-size: 30px;
      opacity: 0;
    }
  }

  .uploadRight {
    width: 400px;
    margin-left: 20px;

    .el-form {
      .el-form-item {
        ::v-deep .el-input__inner {
          width: 307px;
        }

        ::v-deep .el-input__suffix {
          // display: none;
          position: absolute;
          right: 10px;
        }
      }
    }
  }
}
</style>
